<!--分析结果折线图显示-->

<template>
  <div>
    <FunctionlUnitFrame  @closePane="closePane">
      <template slot="title">分析结果显示</template>
      <template slot="content">
        <div id="myChart" ></div>
      </template>
    </FunctionlUnitFrame>
  </div>
</template>

<script>
  import FunctionlUnitFrame from '@/components/FunctionalUnit/FunctionlUnitFrame'

  // 引入基本模板
  let echarts = require('echarts/lib/echarts')
  // 引入柱状图组件
  require('echarts/lib/chart/line')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')

  export default {
    name: "AnalysisResultEchartLine",
    components:{
      'FunctionlUnitFrame':FunctionlUnitFrame
    },
    mounted(){
      this.$nextTick(function () {
        let myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        let option = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLabel :{
              color:'white',
              show:false
            },
            axisLine:{
              show:true
            }
          },
          yAxis: {
            type: 'value',
            axisLabel :{
              color:'white'
            },
            splitLine :{
              show:true
            }
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {}
          }]
        };
        myChart.setOption(option);
      });
    },
    methods:{
      closePane(){
        this.$emit('closePane',false);
      }
    }
  }
</script>

<style scoped>
  .fa{
    font-size: 22px;
    margin-left: 6px;
    cursor: pointer;
  }
  .fa-trash-o{
    color: #af4040;
  }
  .layerpanel{
    width: 1200px;
  }
  #myChart
  {
    width: calc(100% + 120px);
    height: 300px;
    margin: -30px;
    margin-left: -60px;
  }

  @media screen and (max-width: 500px) {
    .layerpanel{
      width: 350px;
      font-size: 12px;
      top: 80px;
    }
    #myChart
    {
      width: calc(100% + 20px);
      height: 300px;
      margin: -10px;
      margin-left: 2px;
    }
  }
</style>
